<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动画</title>
    <style>
      #girl {
        width: 32px;
        height: 32px;
        background-image: url(./img/mota-1.png);
        background-position-x: 0px;
        /* animation-name: active;
        animation-duration: 950ms;
        animation-iteration-count: infinite;
        animation-timing-function: steps(1, start); */
        animation: active 1s steps(1, start) infinite;
      }

      .left {
        background-position-y: -32px;
      }

      .right {
        background-position-y: -64px;
      }

      .down {
        background-position-y: 0px;
      }

      .up {
        background-position-y: 32px;
      }

      @keyframes active {
        25% {
          background-position-x: 0px;
        }
        /* 50% {
          background-position-x: -32px;
        }
        75% {
          background-position-x: -64px;
        } */
        100% {
          background-position-x: -96px;
        }
      }
    </style>
  </head>

  <body>
    <div id="girl" class="down"></div>
    <br />
    <button id="runUp">上</button>
    <button id="runLeft">左</button>
    <button id="runDown">下</button>
    <button id="runRight">右</button>
    <script>
      const girl = document.getElementById("girl");

      document.getElementById("runUp").addEventListener("click", () => {
        girl.setAttribute("class", "up");
      });

      document.getElementById("runLeft").addEventListener("click", () => {
        girl.setAttribute("class", "left");
      });

      document.getElementById("runDown").addEventListener("click", () => {
        girl.setAttribute("class", "down");
      });

      document.getElementById("runRight").addEventListener("click", () => {
        girl.setAttribute("class", "right");
      });
    </script>
  </body>
</html>
